<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title></title>

    <!-- Bootstrap Core CSS -->
    <link href="__PUBLIC__/home/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <!--<link href="_PUBLIC__/font/css/font-awesome.min.css" rel="stylesheet" type="text/css">-->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	
	<link href="__PUBLIC__/home/css/common.css" rel="stylesheet">
</head>

<body>
	<style type="text/css">
	    .modal.fade{
	        left:50%;  
	    }
	</style>
	<div class="container-fluid">
        <!-- Page Heading -->
        <div class="row">
			<div class="col-md-12">
				<ol class="breadcrumb">
					<li class="active">
						<i class="fa fa-fw fa-edit"></i>
						组合
					</li>
				</ol>
			</div>
		</div>
        <div class="row">
            <div class="col-lg-12">
                <!--<h4 class="page-header">
                	柠檬照相馆
                </h4>-->
                <div class="row">
					<div class="col-xs-12">
						<button data-toggle="modal" data-target="#myOperationModal" type="button" class="btn btn-sm btn-success op-btn" id="xx-btn-add"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button>
						<button data-toggle="modal" data-target="#myOperationModal" type="button" class="btn btn-sm btn-danger op-btn" id="xx-btn-all"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>全选</button>
						<button data-toggle="modal" data-target="#myOperationModal" type="button" class="btn btn-sm btn-primary op-btn" id="xx-btn-delete"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>删除</button>
					</div>
					
				</div>
                
            </div>
        </div>
        <!-- /.row -->
		<input value="{$drive}" id="lc-input-drive" style="display: none;"/>
        <div class="row">
            <div class="col-lg-6">
            	<div id="lc-div-view"></div>
                <!--<div id="addKeyvalues" class="mui-popover" style="OVERFLOW-Y: auto;">
				</div>-->
				<div class="modal fade" id="lc-div-window" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				    <div class="modal-dialog">
				        <div class="modal-content">
				            <div class="modal-header">
				                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				                <h4 class="modal-title" id="myModalLabel">设置窗口</h4>
				            </div>
				            <div class="modal-body" id="addWindows">
				            	
				            </div>
				            <div class="modal-footer">
				                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				                <button type="button" class="btn btn-primary">提交更改</button>
				            </div>
				        </div><!-- /.modal-content -->
				    </div><!-- /.modal -->
				</div>
				<div id="lc-div-view"></div>
                <!--<div id="addKeyvalues" class="mui-popover" style="OVERFLOW-Y: auto;">
				</div>-->
				<div class="modal fade" id="lc-div-drive" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				    <div class="modal-dialog">
				        <div class="modal-content">
				            <div class="modal-header">
				                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				                <h4 class="modal-title" id="myModalLabel">选择驱动</h4>
				            </div>
				            <div class="modal-body" id="selectDrive">
				            	
				            </div>
				            <div class="modal-footer">
				                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				                <button type="button" class="btn btn-primary">提交更改</button>
				            </div>
				        </div><!-- /.modal-content -->
				    </div><!-- /.modal -->
				</div>
				<div id="lc-div-view"></div>
                <!--<div id="addKeyvalues" class="mui-popover" style="OVERFLOW-Y: auto;">
				</div>-->
				<div class="modal fade" id="lc-div-keyvalues" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				    <div class="modal-dialog">
				        <div class="modal-content">
				            <div class="modal-header">
				                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				                <h4 class="modal-title" id="myModalLabel">设置键值</h4>
				            </div>
				            <div class="modal-body" id="addKeyvalues">
				            	
				            </div>
				            <div class="modal-footer">
				                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				                <button type="button" class="btn btn-primary">提交更改</button>
				            </div>
				        </div><!-- /.modal-content -->
				    </div><!-- /.modal -->
				</div>

            </div>
            
            <div class="col-lg-5">
                <!--<button data-toggle="modal" data-target="#myOperationModal" type="button" class="btn btn-sm btn-success op-btn" id="xx-btn-add"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button>
				<button data-toggle="modal" data-target="#myOperationModal" type="button" class="btn btn-sm btn-danger op-btn" id="xx-btn-all"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>全选</button>
				<button data-toggle="modal" data-target="#myOperationModal" type="button" class="btn btn-sm btn-primary op-btn" id="xx-btn-delete"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>删除</button>-->
            	<div class="mui-input-row">
            		<label class="col-sm-3">设置行数</label>
            		<input type="number" class="form-control" placeholder="请输入行数" id="lc-input-column">
				</div>
				<br />
				<div class="mui-input-row">
					<button type="button" class="btn btn-primary btn-lg" id="lc-btn-set">确认行数</button>
					<!--<button type="button" class="btn btn-primary btn-lg" id="lc-btn-change" data-status = "1">禁止编辑</button>-->
					<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#lc-div-window">设置窗口</button>
					<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#lc-div-drive">选择驱动</button>
					<!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#lc-div-keyvalues">设置键值</button>-->
				</div>
				<br />
				<div class="mui-input-row">
					<button type="button" class="btn btn-primary btn-lg btn-block" id="lc-btn-submit">确认并保存</button>
				</div>
            </div>
        </div>
        <!-- /.row -->
        

    </div>
    
	

    <script src="__PUBLIC__/home/js/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="__PUBLIC__/home/js/bootstrap.min.js"></script>
    
    <!-- iframe自适应高度 -->

</body>
	<script type="text/javascript">
		var select_data = [];
		$.ajax({
			type:"post",
			url:"{:U('Drive/getDriveList')}",
			async:true,
			data:{
			},
			dataType:"json",
			success:function(result){
				select_data = result.data;
				console.log(select_data[0].drive_id)
			}
		});
		var checkBox = false;
		var row2_count = 1;
		var row3_count = 1;
		var div3_count = 1;
		var row_count = 0;
		//type: {1,2,3}
		var row3_type = 1;
		var is_commit = false;
		$("#lc-btn-set").click(function(){
			var column = $("#lc-input-column").val();
			$("#lc-div-view").html("");
			$("#addKeyvalues").html("");
			$("#addWindows").html("");
			$("#selectDrive").html("");
			if(!column){
				row_count = column*3 + 2;
			}
			for(var i = 0; i < column*3; i++){
				$("#lc-div-view").append('<div onclick="getValue5(this,'+i+')" id="btn-'+i+'" class="btn-revise col-sm-4" ;margin: 10px 50px 10px 50px; border-radius: 50px"><input id="input-'+i+'" class="input-revise" style="background-color: #6FD1BD;text-align:center;margin: 10px 0px 10px 0px;width: 100%; border: none;"/></div>');
				$("#addKeyvalues").append('<input type="text" class="input-keyvalues" placeholder="第'+parseInt(i+1)+'个" id="keyvalues-'+i+'"/>');
				$("#addWindows").append('<input type="text" class="input-windows" placeholder="第'+parseInt(i+1)+'个" id="windows-'+i+'"/>');
				$("#selectDrive").append('<select class="select-drive col-sm-4" id="select-'+i+'"></select>');
				for(var j in select_data){
					$("#select-"+i).append('<option value='+select_data[j].drive_id+'>'+select_data[j].drive_name+'</option>');
				}
			}
//			$("#lc-div-view").append('<button onclick="getDefault(this,1)" style="width: 100px; margin-top: 10px; margin-bottom:10px; border-radius: 50px" class="btnn-revise">拍照</button>');
//			$("#addKeyvalues").append('<input type="text" placeholder="拍照" class="input-keyvalues"/>');
//		    $("#addWindows").append('<input type="text" placeholder="拍照" class="input-windows"/>')
//			$("#lc-div-view").append('<button onclick="getDefault(this,2)" style="width: 100px; margin-top: 10px; margin-bottom:10px; border-radius: 50px" class="btnn-revise">摄像</button>');
//			$("#addKeyvalues").append('<input type="text" placeholder="摄像" class="input-keyvalues"/>');
//			$("#addWindows").append('<input type="text" placeholder="摄像" class="input-windows"/>');
		});
		//编辑模式
//		$("#lc-btn-change").click(function(){
//			if($(this).attr("data-status") == 1){
//				$(this).attr("data-status",2);
//				$(this).html("允许编辑");
//				$("input.input-revise").attr("readOnly",true);
//				
//				$(".input-revise").each(function(){
//					var i = $(this).attr("id");
//					var temp = $(this).val()
//					i = i.substring(5);
//					$("#keyvalues"+i).attr('placeholder',temp);
//					$("#windows"+i).attr('placeholder',temp);
//					var temp_option = '<option selected="selected" value="0">'+temp+'</option>';
//					console.log(i)
//					console.log($("#select"+i).val())
//					$("#select"+i).prepend(temp_option);
//				});
//				
//			}else{
//				$(this).attr("data-status",1);
//				$(this).html("禁止编辑");
//				$("input.input-revise").removeAttr("readOnly");
//			}
//		});
		//按键点击
		function getValue5(obj,value){
			if(!$(obj).children().val() && $("#lc-btn-change").attr("data-status") == 2){
				alert('请设置按键');
				return;
			}else{
				if($("#lc-btn-change").attr("data-status") == 2){
					
					if(row3_type == 1){
						alert('请输入单行循环次数');
						return;
					}else if(row3_type == 3){
						alert('单步操作运行次数');
						return;
					}else{
						$("#lc-label-compute3-"+row3_count).html($("#lc-label-compute3-"+row3_count).html()+' '+$(obj).children().val());
						row3_type = 3;
						is_commit = false;
					}
						
				}
				
			}
		}
		
		$("#lc-btn-submit").click(function(){
			var data = [];
			var dataKey = [];
			var dataValue = [];
			var dataWindow = [];
			var dataDrive = [];
			$(".input-revise").each(function(){
				if(!$(this).val()){
					alert('请填写完整');
				}
				dataKey.push($(this).val());
			});
//			$(".input-keyvalues").each(function(){
//				if(!$(this).val()){
//					alert('请填写完整');
//				}
//				dataValue.push($(this).val());
//			});
//			$(".input-windows").each(function(){
//				if(!$(this).val()){
//					alert('请填写完整');
//				}
//				dataWindow.push($(this).val());
//			});
//			$(".select-drive").each(function(){
//				if(!$(this).val()){
//					alert('请填写完整');
//				}
//				dataDrive.push($(this).val());
//			});
			$.ajax({
				type:"post",
				url:"{:U('Resouse/revise')}",
				async:true,
				data:{
					'dataKey' : dataKey,
//					'dataValue' : dataValue,
//					'dataWindow' : dataWindow,
//					'dataDrive' : dataDrive,
				},
				dataType:"json",
				success:function(result){
					if(result.status == 0){
						alert(result.msg);
					}else{
						location.href = "{:U('Combo/index')}";
					}
				}
			});
		});
	</script>

</html>
